<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>登录注册</title>
	</head>
	<body>
		<div class="content">
			<div class="stage">
				<div id="box">
					<span class="kind b1 txt">欢迎使用音符登录</span>
					<div class="kind b1">
						<img src="./img/3dImg.png" alt="图片" />
					</div>
					<div class="kind b2">
						<img src="./img/3dImg.png" alt="图片" />
					</div>
					<div class="kind b3">
						<img src="./img/3dImg.png" alt="图片" />
					</div>
					<div class="kind b4">
						<img src="./img/3dImg.png" alt="图片" />
					</div>
					<div class="kind b5">
						<img src="./img/3dImg.png" alt="图片" />
					</div>
					<div class="kind b6">
						<img src="./img/3dImg.png" alt="图片" />
					</div>
				</div>
			</div>
			
			<div class="main">
				<div class="input-wrap">
					<h2 id="greet">欢迎你</h2>
					<form id="loginform" name="loginform" class="loginform">
						<div style="display: flex; flex-direction: row; align-items: center;">
							<div>账号：</div>
							<input style="width: 70%;" class="userName" id="phoneNumber" title="请输入11位的手机号码" pattern="1[0-9]{10}" type="text" placeholder="请输入您的号码" required=""/>
						</div>
						<div style="display: flex; flex-direction: row; align-items: center;">
							<div>密码：</div>
							<input style="width: 70%;" type="password" id="pwd" placeholder="请输入密码">
						</div>
						<div style="display: flex; flex-direction: row; align-items: center;">
							<input type="checkbox" id="rememberPWD" style="width: 10px;" value="记住密码">
							<label id="rememberPWD" >记住密码</label>
							<button type="button" id="forgetPWD">忘记密码？</button>
						</div>
						<p>
							<!-- <button type="button" onclick="login()">登&nbsp;&nbsp;录</button> -->
							<input name="btnRtSubmit" type="submit" class="loginbtn" id="btnRtSubmit" value="提交" />
							<button type="button" onclick="regist()">注&nbsp;&nbsp;册</button>
						</p>
					</form>
				</div>
			</div>
		</div>
	</body>
</html>

<style>
	body{
		background-image: url(img/light.png);
		background-size: cover;
		/* background-color: #20A7FF; */
	}
	.content{
		/* background-color: #1cff89; */
		/* position: absolute; */
		margin: 0px;
		padding: 0px;
		border: 0px;
		width: 60%;
		height: 300px;
	}
	.main{
		background-image: url(img/logininfo3.png);
		width: 550px;
		height: 250px;
		text-align: center;
		padding: 50px 0;
		border-radius: 10px;
		margin: 0 auto;
		position: absolute;
		top: 10%;
		right: 15%;
	}
	.input-wrap{
		position: absolute;
		right: 15%;
		top: 10%;
	}
	#forgetPWD{
		width: 80px;
		height: 20px;
		font-size: 14px;
		color: #20A7FF;
		font-weight: bold;
		outline: none;
		border: none;
		display: flex;
		margin: auto;
		padding: 0px;
		border-radius: 0px;
		text-align: center;
		background-color: #FFFFFF;
	}
	#forgetPWD:hover{
		color: #FF0000;
	}
	#rememberPWD{
		width: 80px;
		color: #000000;
		font-size: 14px;
		font-weight: bold;
		outline: none;
		border: none;
		display: flex;
		margin: auto;
		padding: 0px;
		border-radius: 0px;
		text-align: center;
	}
	h2{
		font-family: "微软雅黑";
		font-size: 28px;
		font-weight: bold;
	}
	input{
		outline: none;
		border: 1px solid black;
		display: block;
		margin: 10px auto;
		padding: 5px;
		width: 230px;
		border-radius: 15px;
		font-weight: 300;
		text-align: left;
	}
	form{
		
	}
	button{
		outline: none;
		background-color: #ff5500;
		border-radius: 10px;
		border:0;
		height: 30px;
		width: 80px;
		padding: 5px;
		color: white;
	}
	button:hover{
		background-color: #20A7FF;
	}
	
	.stage{
		perspective: 1600px;
		position: relative;
		left: 200px;
		top: 100px;
	}
	#box{
		width: 400px;
		height: 400px;
		transform-style: preserve-3d;
		animation: rotate-box 20s;
		animation-iteration-count: infinite;
	}
	.kind{
		overflow: hidden;
		width: 200px;
		height: 200px;
		text-align: center;
		line-height: 200px;
		font-size: 50px;
		color: white;
		position: absolute;
		left: 200px;
		top: 200px;
		/* border-radius: 10px; */
	}
	.b1{
		background: rgba(0,255,255,0.6);
		transform: rotateX(-90deg);
		transform-origin: bottom;
	}
	.txt{
		transform: rotateX(-45deg);
		border-radius: 10px;
		font-size: 20px;
	}
	.b2{
		background-color: rgba(127,255,0,0.6);
		transform: rotateX(90deg);
		transform-origin: top;
	}
	.b3{
		background-color: rgba(205,200,177,0.6);
		transform: rotateY(90deg);
		transform-origin: right;
	}
	.b4{
		background-color: rgba(255,182,193,0.6);
		transform: rotateY(-90deg);
		transform-origin: left;
	}
	.b5{
		background-color: rgba(159,121,238,0.6);
		transform: translateZ(0);
	}
	.b6{
		background-color: rgba(138,43,226,0.6);
		transform: translateZ(200px);
	}
	.kind:hover{
		opacity: 0.5;
	}
	@keyframes rotate-box{
		0%{
			transform: rotateX(0deg) rotateY(0deg);
		}
		10%{
			transform: rotateX(0deg) rotateY(180deg);
		}
		20%{
			transform: rotateX(-180deg) rotateY(180deg);
		}
		30%{
			transform: rotateX(-360deg) rotateY(180deg);
		}
		40%{
			transform: rotateX(-360deg) rotateY(360deg);
		}
		50%{
			transform: rotateX(-180deg) rotateY(360deg);
		}
		60%{
			transform: rotateX(90deg) rotateY(180deg);
		}
		70%{
			transform: rotateX(0deg) rotateY(180deg);
		}
		80%{
			transform: rotateX(90deg) rotateY(90deg);
		}
		90%{
			transform: rotateX(90deg) rotateY(0deg);
		}
		100%{
			transform: rotateX(0deg) rotateY(0deg);
		}
	}
	#btnRtSubmit{
		width: 80px;
		text-align: center;
		background-color: #ff5500;
	}
	#btnRtSubmit:hover{
		width: 80px;
		text-align: center;
		background-color: #0055ff;
	}
</style>

<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/test.js"></script>
<script>
	// $(function($){
	// 	$("#loginform").on("submit",function(e){
	// 		var userName=$("#userName").val();
	// 		var password=$("#password").val();
			
	// 		// ajax
	// 		$.ajax({
	// 			url: "./JSearch",
	// 			type: "post",
	// 			dataType: 'json',
	// 			timeout:10000,
	// 			cache:false,
	// 			data:{
	// 				username:UserName,
	// 				password:password
	// 			},
	// 			error:function(){
	// 				$(window).attr("location","show404.html");
	// 				return false;
	// 			},
	// 			success:function(){
	// 				window.location.href="JSearch.html";
	// 			}
	// 		});
	// 	});
	// });
	
	window.onload=function(){
		// 窗口宽高
		window.resizeBy(window.innerWidth,window.innerHeight);
		
		var today=new Date().getHours();
		var msg="早上好！欢迎～";
		if(today>=12&&today<18){
			msg="下午好！欢迎～";
		}
		else if(today>=18&&today<24){
			msg="晚上好！欢迎～";
		}
		document.getElementById("greet").innerText=msg;
	}
	
	function login(){
		var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
		if (!myreg.test(document.getElementById("phoneNumber").value)) {
			Toast('手机号格式不正确')
			return false;
		} 
		else {
			if(document.getElementById("phoneNumber").value=="18223075242" && document.getElementById("pwd").value=="123456"){
				window.open("./search.html","_self");
			}
			else{
				Toast("您输入的账户或密码有误");
			}
			return true;
		}
	}
	function regist(){
		window.open("./regist.html","_self");
	}
	//提示信息 封装
	function Toast(msg){  
	    duration=1000;  
	    var m = document.createElement('div');
		if(msg==""){
			m.innerHTML="请先输入内容哦！";
		}
		else{
			m.innerHTML = msg; 
		}
	    m.style.cssText="font-size: .32rem;color: rgb(255, 255, 255);background-color: rgba(0, 0, 0, 0.6);padding: 10px 15px;margin: 0 0 0 -60px;border-radius: 4px;position: fixed;    top: 50%;left: 50%;width: 130px;text-align: center;";
	    document.body.appendChild(m);  
	    setTimeout(function() {  
	        var d = 0.5;
	        m.style.opacity = '0';  
			
			document.body.removeChild(m)
	    }, duration);  
	}
</script>
